<template>
  <main>
    <c-navigation>
      <c-time @change="timeChangeHandler"/>
    </c-navigation>
    <c-card>
      <tap-component :tabData="tabData" @change="tapChangeHandler">
        <div class="chart-box">
          <chart-bar :barData="chartBarData"/>
        </div>
        <div class="summary-box">
          <summary-item title="次均费用可下调空间" :value="canBeCut"/>
          <summary-item title="次均费用需下调科室" :value="needToCut"/>
          <summary-item title="可以保持不变科室" :value="remain"/>
          <summary-item :title="reachTheStandard.rate" :value="reachTheStandard.sum"/>
        </div>
      </tap-component>
      <a-table class="custom"
               :columns="tableColumns"
               :data-source="tableData"
               :pagination="pagination"
               :rowKey="()=>Math.random()"/>
    </c-card>
  </main>
</template>

<script lang="ts">
import columns from "./assets/columns";
import tapComponent from "./components/tapComponent.vue";
import * as drgsGroupResults from '@/api/drgsGroupResults';
import chartBar from "./components/chartBar"
import summaryItem from "./components/summaryItem.vue";

export default {
  components: {chartBar, summaryItem, tapComponent},
  data() {
    return {
      apiPrefix: "departmentAnalysis",
      tabData: [
        {label: "次均费用", value: "a", api: "ByFee", listApi: "ByFeeList"},
        {label: "次均药费", value: "b", api: "ByDrugFee", listApi: "ByDrugFeeList"},
        {label: "次均材料费", value: "c", api: "ByMaterialFee", listApi: "ByMaterialFeeList"},
        {label: "平均住院日", value: "d", api: "ByDays", listApi: "ByDaysList"}
      ],
      tableColumns: columns,
      tableData: [],
      chartBarData: [],
      curSelectData: null,
      timeParams: null,
      pagination: {
        pageSize: 8
      },
      summaryData: {},
    }
  },
  computed: {
    canBeCut() {
      const {summaryData} = this;
      const sum = summaryData['moneyAvg'] - summaryData['areaFeeAvg'] || 0;
      const rate = ((summaryData['moneyAvg'] - summaryData['areaFeeAvg']) / summaryData['moneyAvg']) * 100
      return `${sum ? sum.toFixed(2) : 0} 元丨 ${rate ? rate.toFixed(2) : 0}%`
    },
    needToCut() {
      const {summaryData} = this;
      const rate = summaryData['needDownProportion'] * 100;
      return `${summaryData['needDownCount'] || 0} 个丨占比 ${rate ? rate.toFixed(2) : 0}%`
    },
    remain() {
      const {summaryData} = this;
      const rate = summaryData['keepProportion'] * 100;
      return `${summaryData['keepCount'] || 0} 个丨占比 ${rate ? rate.toFixed(2) : 0}%`
    },
    reachTheStandard(){
      const {summaryData} = this;
      const rete = summaryData['standardProportion']*100
      return {
        sum:`前 ${summaryData['standardCount'] || 0} 个科室`,
        rate:`可达目标${rete?rete.toFixed(2):0}%以上`
      }

    }
  },
  created() {
    this.curSelectData = this.tabData[0];
  },
  mounted() {
    this.getData();
  },
  methods: {
    timeChangeHandler(e) {
      this.timeParams = e;
      this.getData();
    },
    tapChangeHandler(e) {
      this.selectedValue = e.value;
      this.curSelectData = e;
      this.getData();
    },
    async getData() {
      const params = {
        year: this.timeParams.year,
        month: this.timeParams.month
      }
      await this.getSummaryData(params);
      await this.getListData(params);
    },
    async getSummaryData(params) {
      const res = await drgsGroupResults[`${this.apiPrefix}${this.curSelectData.api}`](params);
      if (res['data']) {
        this.chartBarData = [res['data']['moneyAvg'], res['data']['areaFeeAvg']];
        this.summaryData = res['data'];
      }
    },
    async getListData(params) {
      const res = await drgsGroupResults[`${this.apiPrefix}${this.curSelectData.listApi}`](params);
      if (res['data']) {
        this.tableData = res['data'];
      }
    },

  }
}
</script>

<style scoped lang="stylus">
.custom {
  margin-top 20px
}

.chart-box {
  width 320px
  height 240px
  flex-shrink 0
}

.summary-box {
  padding-right 100px
  flex-grow 1
  flex-shrink 0
  height 100%
  display flex
  align-items center
  justify-content space-between
}
</style>
